<template>
    <div class="app-main">
        <myheader title="用户资料完善"/>
        <el-upload
                class="avatar-uploader"
                :action='uploadPath'
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl!=null" :src="this.$basePath + '/ccCustomerApiController/previewPhoto?fileId=' + imageUrl" class="avatar"/>
            <i v-else class="avatar-uploader-icon el-icon-plus "></i>
        </el-upload>
        <div class="title">请参考下列图片上传个人正面照</div>
        <div class="main">
            <img src="">
            <img src="">
        </div>
        <div class="foot">
            <el-button type="primary" @click="toDetail">确定</el-button>
        </div>
    </div>
</template>

<script>
    import {Toast} from "mint-ui";
    export default {
        data() {
            return {
                imageUrl: null,
                uploadPath: this.$basePath + '/ccCustomerApiController/uploadPhoto'
            };
        },
        methods: {
            handleAvatarSuccess(res, file) {
                console.log('头像上传返回结果=>', res)
                if (res.retCode == '200') {
                    this.imageUrl = res.retDetail.photoFileId
                }
                else {
                    Toast({
                        message: res.retMsg,
                        iconClass: 'el-icon-circle-close-outline'
                    });
                }

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            toDetail () {
                if (this.imageUrl == null) {
                    this.$warning("请先上传头像")
                    return
                }
                this.$router.push({
                    name: 'registerDetail', query: {imageUrl: this.imageUrl}
                })
            }
        },
        mounted: function () {
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {

        font-size: 28px;
        color: #8c939d;
        width: 245px;
        height: 140px;
        line-height: 140px;
        text-align: center;
    }

    .avatar {
        width: 245px;
        height: 140px;
        display: block;
    }

    .el-upload {
        margin-left: 70px;
        margin-top: 40px;
    }

    .title {
        height: 40px;
        background: #F8F8F8;
        color: #999;
        font-size: 14px;
        margin-top: 50px;
        line-height: 40px;
    }

    .main {
        height: 200px;
        padding-top: 55px;
        padding-left: 15px;
    }

    .main > img {
        width: 160px;
        height: 130px;
    }

    .main > :last-child {
        margin-right: 15px;
        float: right;
    }

    .foot {
        width: 100%;
        position: absolute;
        height: 116px;
        background: #F8F8F8;
        bottom: 0px;
    }

    .foot > button {
        width: 240px;
        height: 50px;
        margin-left: 67.5px;
        margin-top: 40px;
    }


</style>
